<script lang="ts" setup>
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import {
  queryUserInfoDetailOrderRequestData,
  BatteryPackageDetailOrderTableCol,
  queryUserInfoDetailOrderTableCol
} from '@/api/user/types/user'
import GoButton from '@/components/basic/GoButton.vue'
import BatteryTermTable from '@/components/table/BatteryTermTable.vue'
import { useRouter, useRoute } from 'vue-router'
import { ref, defineAsyncComponent, reactive, onActivated } from 'vue'
import { queryUserInfoDetailOrder } from '@/api/user'
import { getToken } from '@/utils/cache/cookies'
import { useTable } from '@/hooks/useTable'
const AdjustTermDialog = defineAsyncComponent(() => import('@/components/dialog/AdjustTerm.vue'))
const OrderInfoDialog = defineAsyncComponent(() => import('@/components/dialog/OrderInfo.vue'))
const DepositDeductionDialog = defineAsyncComponent(
  () => import('@/components/dialog/DepositDeduction.vue')
)
const route = useRoute()
const router = useRouter()
const handleFormSearch = () => {
  if (form.phone !== route.query.phone) {
    router.push({
      name: 'BatteryTermOrder',
      query: {
        phone: form.phone,
        orderId: form.orderId,
        type: form.type,
        selectType: 'batterypackage'
      }
    })
    return
  }
  setCurrentPage(1)
  load()
}
const showTermAdjustRecord = () => {
  router.push({
    name: 'AdjustTermRecord',
    query: {
      orderId: ''
    }
  })
}
const AdjustTermDialogRef = ref<InstanceType<typeof AdjustTermDialog> | null>(null)
const OrderInfoDialogRef = ref<InstanceType<typeof OrderInfoDialog> | null>(null)
const DepositDeductionDialogRef = ref<InstanceType<typeof DepositDeductionDialog> | null>(null)
const handleOpenAdjustTerm = (data: BatteryPackageDetailOrderTableCol) => {
  AdjustTermDialogRef.value?.setId(data.orderId)
  AdjustTermDialogRef.value?.open()
}
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: route.query.phone as string,
  orderId: route.query.orderId as string,
  type: '',
  selectType: 'batterypackage'
})
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
onActivated(() => {
  form.phone = route.query.phone as string
  form.orderId = route.query.orderId as string
})
defineExpose({ load })

const handleOpenOrderInfo = (row: BatteryPackageDetailOrderTableCol) => {
  OrderInfoDialogRef.value?.setId(row.orderId, row.userId)
  OrderInfoDialogRef.value?.open()
}
const handleOpenDepositDeduction = (row: BatteryPackageDetailOrderTableCol) => {
  DepositDeductionDialogRef.value?.setData(row.orderId)
  DepositDeductionDialogRef.value?.open()
}
</script>

<template>
  <div flex justify-between items-center>
    <user-info-form v-model="form" type="batteryterm" @search="handleFormSearch" />
    <go-button icon-name="record" @click="showTermAdjustRecord">
      <template #text>
        <span>套餐调整记录</span>
      </template>
    </go-button>
  </div>
  <battery-term-table
    @show-info="handleOpenOrderInfo"
    :data="data as BatteryPackageDetailOrderTableCol[]"
    @open="handleOpenAdjustTerm"
    @open-deduction="handleOpenDepositDeduction"
    :loading="loading"
  />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <adjust-term-dialog ref="AdjustTermDialogRef" @refresh="load" />
  <order-info-dialog ref="OrderInfoDialogRef" />
  <deposit-deduction-dialog ref="DepositDeductionDialogRef" @refresh="load" />
</template>

<style scoped></style>
